<template>
	<view :class="minishop.config.style">
		<FullscreenLoading :loading="loading" :config="minishop.config"></FullscreenLoading>

		<view class="searchbox">
			<Search class="searchbox" title="搜索组件" type="search" :config="minishop.config"/>
		</view>

		<view class="category-body" :style="'height:'+height+'px'">
			<!--一级分类容器-->
			<scroll-view class="nav-left" scroll-y="true" :style="'height:'+height+'px'" :scroll-top="scrollLeftTop" scroll-with-animation>
				<view class="nav-left-item text-ellipsis" @click="categoryClickMain(item.id)" :key="index" :class="item.id==categoryActive?'active':''"
					v-for="(item,index) in tree">
					{{item.title}}
				</view>
			</scroll-view>
			<!--子分类容器-->
			<scroll-view class="nav-right" scroll-y="true" :scroll-top="scrollTop" scroll-with-animation
				 @scrolltolower="loadMore">
				<view class="child-items">
					<view v-for="(child,index) in tree" :key="index" class="child-item" :class="child.id==categoryActive?'active':''">
						<view class="nav-right-item" :class="categoryId == categoryActive?'active':''" @click="categoryClickChild(categoryActive)">
							<image :src="child.cover_100" />
							<view>全部</view>
						</view>
						<view class="nav-right-item" :class="categoryId == item.id?'active':''" v-for="(item,i) in child._child" :key="i" @click="categoryClickChild(item.id)">
							<image :src="item.cover_100" />
							<view class="text-ellipsis">{{item.title}}</view>
						</view>
					</view>
				</view>
				
				<!--商品列表容器-->
				<view class="list-section">
					<!-- 数据列表 -->
					<view class="list">
						<view class="item" v-for="(item,index) in list" :key="index" @click="goToDetailLink(item.id)">
							<view class="content">
								<view class="cover">
									<!-- #ifdef APP-PLUS || MP -->
									<image mode="widthFix" :lazy-load="true" :src="item.cover_400" class="image"></image>
									<!-- #endif -->
									<!-- #ifdef H5 -->  
									<img class="image" v-lazy="item.cover_400">  
									<!-- #endif --> 
								</view>
								<view class="info">
									<view class="title text-ellipsis-2">{{item.title}}</view>
									<view class="price">￥ {{handlePrice(item.price,0)}}.<text class="pointback">{{handlePrice(item.price,1)}}</text></view>
									<view class="exp-info">
										<view class="item view">
											<uni-icons type="eye" size="10" color="#999"></uni-icons> 
											<text class="num">{{item.handling_view}}</text>
										</view>
										<view class="item sales">
											<uni-icons type="cart-filled" size="10" color="#999"></uni-icons> 
											<text class="num">{{item.handling_sales}}</text>
										</view>
										<view class="item favorites">
											<uni-icons type="star" size="10" color="#999"></uni-icons> 
											<text class="num">{{item.handling_favorites}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<uni-load-more iconType="circle" :status="listLoadStatus" />
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import Base from '@/muu_minishop/common/base.vue'

	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	import MinishopGoodsList from '@/common/diys/MinishopGoodsList/MinishopGoodsList.vue' //列表组件
	import Search from '@/common/diys/Search/Search.vue'//搜索框
	import TabBar from "../common/tabBar.vue"//底部导航
	
	export default {
		extends:Base,
		components: {
			MinishopGoodsList,
			Search,
			TabBar,
		},
		data() {
			return {
				tree: {},
				height: 0, //分类区域高度
				categoryActive: 0,
				categoryId: 0,
				scrollTop: 0,
				scrollLeftTop: 0,
				scrollHeight: 0,
				arr:[0,584,1168,1752,2336,2805,3274,3858,4442,4911,5380,5734,6203,6672,7017],//初始值，后边计算会根据手机适配覆盖
				leftItemHeight: 51,//49行会计算出新值进行覆盖
				navLeftHeight: 0,//左边scroll-view 内层nav的总高度
				diff: 0,//左边scroll-view 内层nav的总高度与视口之差
				tabBarHeight: 0,//如果此页面为Tab页面，自己改变高度值,,一般tab高度为51
				
				listSectionHeight: 200,
				page: 1, //当前页码
				list: [], //列表数据
				listLoadStatus: 'loading', // more 加载前 loading 加载中 noMore没有更多
			}
		},
		async onLoad(option) { //option为object类型，会序列化上个页面传递的参数
		    await this.$onLaunched
		    await this.baseIsReady()
		},

		created() {
			this.height = uni.getSystemInfoSync().windowHeight - 46
			//console.log(this.height)
			this.getCategoryTree()
		},

		methods: {

			/**
			 * 获取分类数据
			 */
			getCategoryTree: function(){
				let that = this
				let promise = new Promise(function(resolve, reject){
					//获取分类数据
					that.util.request({
						url : 'entry/wxapp/category',
						data : {
							'action': 'tree'
						},
						success: function (res) {
							if (res.data.code == 200) {
								that.tree = res.data.data
								resolve()
							}
						}
					})
				})
				promise.then(function(){
					that.setDefaultCategoryActive()
					that.loading = false
				})
			},
			getHeightList: function(){
				let _this = this;
				let selectorQuery = uni.createSelectorQuery().in(this)
				//console.log(selectorQuery)
				selectorQuery.selectAll('.nav-left-item').boundingClientRect(function(rects) {
					//console.log(JSON.stringify(rects))
					_this.leftItemHeight  =  rects[0].height;
					_this.navLeftHeight = _this.leftItemHeight * _this.tree.length;
					_this.diff =  _this.navLeftHeight - _this.height;
				});
				selectorQuery.selectAll('.box').boundingClientRect(function(rects) {
					let arr = [0];
					let top = 0;
					rects.forEach(function(rect){
	// 					rect.id      // 节点的ID
	// 					rect.dataset // 节点的dataset
	// 					rect.left    // 节点的左边界坐标
	// 					rect.right   // 节点的右边界坐标
	// 					rect.top     // 节点的上边界坐标
	// 					rect.bottom  // 节点的下边界坐标
	// 					rect.width   // 节点的宽度
	// 					rect.height  // 节点的高度
						top += rect.height;
						arr.push(top)
					})
					//console.log(arr)
					_this.arr = arr
				}).exec()
				
				selectorQuery.selectAll('.child-item').boundingClientRect(function(rects) {
					console.log(rects[0])
					//_this.arr = arr
					_this.listSectionHeight = _this.height - rects[0].height
				}).exec()
			},
			
			setDefaultCategoryActive: function(){
				this.categoryActive = this.urlParams.id
				this.categoryId = this.urlParams.id
				//console.log(this.categoryId)
				if(this.urlParams.id == undefined || this.urlParams.id == 0){
					this.categoryId = this.tree[0]['id']
					this.categoryActive = this.tree[0]['id']
				}
				this.getList()
			},
			
			/**
			 * 一级列表事件
			 * @param {Object} id
			 */
			categoryClickMain: function(id) {
				let that = this
				this.listLoadStatus = 'loading'
				this.categoryActive = id;
				this.scrollTop == this.arr[id] ? this.scrollTop = this.scrollTop+1 : this.scrollTop = this.arr[id]//防止两次相等造成点击不触发滚动时间
				let promise = new Promise(function(resolve, reject){
				    //console.log(id);
					that.categoryId = id
					//清空列表、初始化分页
					that.list = []
					that.page = 1
					that.getList()
				    resolve()
				});
				
			},
			
			categoryClickChild: function(id) {
				let that = this
				this.listLoadStatus = 'loading'
				let promise = new Promise(function(resolve, reject){
				    console.log(id);
					that.categoryId = id
					//清空列表、初始化分页
					that.list = []
					that.page = 1
					that.getList()
				    resolve()
				});
			},
			
			//路由至详情页
			goToDetailLink: function(id){
				let urlParams = 'id='+id
				let url = '../goods/detail?' + urlParams
				//console.log(url)
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
			},

			/**
			 * 获取列表
			 */
			getList: function() {
				let that = this
				that.listLoadStatus = 'loading'
				let data = {}
					data.action = 'lists'
					data.page = this.page
					data.category_id = this.categoryId
				//获取首页数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/goods'
					//#endif
					//#ifdef H5
					url = 'entry/site/goods'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						//console.log(res.data.code);
						if (res.data.code == 200) {
							let list = res.data.data.data
							that.list = that.list.concat(list);
							that.listLoadStatus = 'end';
							if(res.data.data.data.length < 10){
								that.end_page = true;
								that.listLoadStatus = 'noMore';
							}else{
								that.page = that.page + 1
								that.end_page = false;
								that.listLoadStatus = 'more'
							}
						}
					}
				})
			},
			
			loadMore() { // 触底加载更多
				let that = this;
				if (that.end_page) {
					return '';
				}
				that.end_page = true;
				that.getList();
			},
			
			followWechat: function(){
				this.$refs.openDetail.open()
			},
           
			/**
			* 关注公众号
			*/
			followWechat: function(){
				this.$refs.openDetail.open()
			},
			close: function(){
				this.$refs.openDetail.close()
			},
		   
			handlePrice(price,index){
				return price.split(".")[index];
			}
		}
	}
</script>

<style lang="scss">

.category-body {
	display: flex;
	background: #fff;
	overflow: hidden;
}

.nav-left {
	width: 23%;
	background: #ffffff;
	.nav-left-item {
		height: 96rpx;
		font-size: 28rpx;
		text-align: center;
		line-height: 96rpx;
		color: #666;
		&:last-child{
			border-bottom: none;
		}
	}
	.nav-left-item.active {
		color: $Blue;
		background: #f2f2f2;
		border-right: 0;
	}
}


.nav-right {
	width: 77%;
	background-color: #f2f2f2;
	padding: 0 20rpx;
	padding-right: 10rpx;
	.child-items {
		border-bottom: 10rpx solid #f2f2f2;
		background-color: #ffffff;
		.child-item {
			display: none;


			.nav-right-item {
				width: 130rpx;
				height: 180rpx;
				display: inline-block;
				text-align: center;
				padding: 20rpx;
				font-size: 28rpx;
				color: #666;
				image {
					width: 120rpx;
					height: 120rpx;
				}
			}
			.nav-right-item.active {
				font-weight: 600;
			}
		}
		.child-item.active {
			display: block;
		}
	}

	.list-section {
		position: relative;
		
		
		.list {
			display: flex;
			flex-wrap: wrap;
			margin-top: 0;
			margin: 0 -10rpx;
			>.item {
				box-sizing:border-box;
				width: calc(50% - 20rpx);
				background-color: #fff;
				margin: 10rpx;
				border-radius: 10rpx;
				box-shadow: 0 0 10rpx rgba(0,0,0,.02);
				overflow: hidden;
				.content {
					.cover {
						position: relative;
						overflow: hidden;
						.image {
							width: 100%;
							border-radius: 14rpx 14rpx 0 0;
							display: block;
						}
					}
					.info {
						padding: 10rpx 20rpx 20rpx 20rpx;
						.title {
							font-size: 24rpx;
							color: #2d2f2e;
							font-weight: 400;
							height: 56rpx;
							line-height: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
						}
						.description {
							color: #999;
							font-size: 24rpx;
						}
						.price {
							margin-top: 10rpx;
							font-size: 26rpx;
							.pointback{
								font-size: 22rpx;
							}
						}
						.exp-info {
							margin-top: 10rpx;
							color: #999;
							font-size: 24rpx;
							.item {
								display: inline;
								margin: 0;
								.num {
									margin: 0 10rpx;
								}
							}
						}
					}
				}
			}
		}
	}
}

::-webkit-scrollbar {/*取消小程序的默认导航条样式*/
   width: 0;
   height: 0;
   color: transparent;
}

/*风格样式*/
.Blue {
	.nav-left {
		.nav-left-item.active {
			color: $Blue;
		}
	}
	.nav-right {
		.nav-right-item.active {
			color: $Blue;
		}
	}
	.price {
		color: $Blue;
	}
}
.Green {
	.nav-left {
		.nav-left-item.active {
			color: $Green;
		}
	}
	.nav-right {
		.nav-right-item.active {
			color: $Green;
		}
	}
	.price {
		color: $Green;
	}
}
.LightRed {
	.nav-left {
		.nav-left-item.active {
			color: $LightRed;
		}
	}
	.nav-right {
		.nav-right-item.active {
			color: $LightRed;
		}
	}
	.price {
		color: $LightRed;
	}
}
.Orange {
	.nav-left {
		.nav-left-item.active {
			color: $Orange;
		}
	}
	.nav-right {
		.nav-right-item.active {
			color: $Orange;
		}
	}
	.price {
		color: $Orange;
	}
}
.LightPink {
	.nav-left {
		.nav-left-item.active {
			color: $LightPink;
		}
	}
	.nav-right {
		.nav-right-item.active {
			color: $LightPink;
		}
	}
	.price {
		color: $LightPink;
	}
}
.Magenta {
	.nav-left {
		.nav-left-item.active {
			color: $Magenta;
		}
	}
	.nav-right {
		.nav-right-item.active {
			color: $Magenta;
		}
	}
	.price {
		color: $Magenta;
	}
}

</style>
